<template>
  <div>
    <!-- 卡片 -->
    <el-card class="box-card">
      <el-input
        placeholder="请输入搜索内容"
        v-model="input"
        clearable
        @clear="delT"
        @input="empty"
        class="input-with-select">
        <el-button slot="append" icon="el-icon-search" @click="inq"></el-button>
      </el-input>
      <el-button type="primary" @click="addGoods">添加商品</el-button>
      <!-- 表格 -->
      <el-table :data="goodsList" border style="width: 100%">
        <el-table-column type="index" label="#" width="50">
        </el-table-column>
        <el-table-column prop="goods_name" label="商品名称" width="360">
        </el-table-column>
        <el-table-column prop="goods_price" label="商品价格（元）" width="120">
        </el-table-column>
        <el-table-column prop="goods_weight" label="商品重量" width="100">
        </el-table-column>
        <el-table-column label="创建时间" width="190">
            <template slot-scope="scope">
                 {{ scope.row.add_time | swi }}
            </template>
        </el-table-column>
        <el-table-column label="操作" width="160">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" @click="edit(scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" @click="dels(scope.row)"></el-button>
          </template>

        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagenum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <!-- 编辑弹窗 -->
    <el-dialog
  title="编辑商品"
  :visible.sync="dialogVisible"
  width="50%">
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="商品名称" prop="goods_name">
    <el-input v-model="ruleForm.goods_name"></el-input>
  </el-form-item>
  <el-form-item label="商品价格" prop="goods_price">
    <el-input v-model="ruleForm.goods_price"></el-input>
  </el-form-item>
  <el-form-item label="商品数量" prop="goods_number">
    <el-input v-model="ruleForm.goods_number"></el-input>
  </el-form-item>
  <el-form-item label="商品重量" prop="goods_weight">
    <el-input v-model="ruleForm.goods_weight"></el-input>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editOK">确 定</el-button>
  </span>
</el-dialog>
    </el-card>
  </div>
</template>
<script>
import {getGoods ,edit,dels} from '@/utils/api'
export default {
  name: "APP",
  data() {
    return {
      goodsList:[], //商品列表数据
      goodsList2:[], //商品列表数据2
      input: "", //搜索框
      total:0,  //数据总条数
      pagenum:1, //当前页码
      pagesize:5,//每页显示条数
      dialogVisible:false, //编辑弹窗默认状态

      ruleForm:{
        goods_name:'',
        goods_price:'',
        goods_number:'',
        goods_weight:'',
        goods_id:Number,
      },

      rules: {
        goods_name: [
            { required: true, message: '请输入更改后的商品名称', trigger: 'blur' },
          ],
          goods_price: [
            { required: true, message: '请输入更改后的商品价格', trigger: 'blur' },
          ],
          goods_number: [
            { required: true, message: '请输入更改后的商品数量', trigger: 'blur' },
          ],
          goods_weight: [
            { required: true, message: '请输入更改后的商品重量', trigger: 'blur' },
          ],
      }
    };
  },
  methods: {
    handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
       this.pagesize = val
       this.gos()
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.pagenum = val
        this.gos()
      },

    //封装商品列表的请求
    gos(){
      let params = {
        query:'',
        pagenum:this.pagenum,
        pagesize:this.pagesize
      }
    getGoods(params).then((res)=>{
        // console.log(res);
        this.total = res.data.total
        this.goodsList = res.data.goods
        this.goodsList2 = this.goodsList
    })
    },

    //添加按钮事件
    addGoods(){
      this.$router.push('/goods/add')
    },

    inq(){  //查询商品
      if(this.input != ''){
        this.goodsList = this.goodsList2.filter((item)=>item.goods_name.includes(this.input))
      }
    },
    delT(){ //请求搜索框内容
       this.gos()
    },

    empty(val){
      if(val == ''){
         this.gos()
      }
    },

    edit(val){
      // console.log(val);
      this.ruleForm = val
      this.dialogVisible = true
    },
    editOK(){ //确定编辑
      let params = {
        id:this.ruleForm.goods_id,
        goods_name:this.ruleForm.goods_name,
        goods_price:this.ruleForm.goods_price,
        goods_number:this.ruleForm.goods_number,
        goods_weight:this.ruleForm.goods_weight,
        goods_cat:'1,2,3'
      }
      edit(params).then((res)=>{
        console.log(res);
        if(res.meta.status == 200){
          this.$message({
          message: '编辑成功！',
          type: 'success'
        });
        this.dialogVisible = false
        }
      })
    },

    dels(val){  //删除
      // console.log(val);
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let id = val.goods_id
          dels(id).then((res)=>{
            // console.log(res);
            this.gos()
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    }
  },
  created() {
    this.gos()
  },
  mounted() {},

//   过滤器转换时间格式
  filters:{
     swi(time){
      let date = new Date(time)
      let Y = date.getFullYear() + '-'
      let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      return Y + M + D + h + m + s
     }
  }
};
</script>
<style lang="scss" scoped>
.input-with-select {
  width: 300px;
  margin-right: 10px;
}
.el-table{
    margin-top: 15px;
}
</style>
